<template>
    <div>
        <div>
            <mt-header title="学生线上生源地助学贷款">
                <router-link to="/" slot="left">
                    <mt-button icon="back">返回</mt-button>
                </router-link>
                <mt-button @click="showShare = true" slot="right">分享</mt-button>
            </mt-header>
        </div>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="height: 1400px">
            <van-search
                    v-model="searchValue"
                    shape="round"
                    background="#fff"
                    placeholder="请输入搜索关键词"
            />
            <van-notice-bar text=" 您的贷款、还款记录已报送人民银行个人征信系统，请大家务必按时还款。
   如有违约，会影响您的诚信记录，今后在办理信用卡、房贷、车贷等各类贷款时也会有不良影响。" left-icon="volume-o" />
            <van-swipe
                    style="margin-top: 4px; border-radius: 10px; margin-left: 8px; width: 360px"
                    :height="160"
                    :autoplay="3000">
                <van-swipe-item v-for="(image, index) in images" :key="index">
                    <img style="width: 100%; height: 100%" v-lazy="image" />
                </van-swipe-item>
            </van-swipe>

            <div style="margin-top: 16px; font-size: 16px">
                <van-grid :column-num="3">
                    <van-grid-item @click="toSelect(index)" v-for="(item, index) in textArray" :key="index" :icon="item.icon" :text="item.name" />
                </van-grid>
            </div>

            <div>
                <van-badge style="margin-left: 8px; margin-top: 10px" :content="noticeList.length">
                    <van-button style="width: 360px" type="info">最新消息通知</van-button>
                </van-badge>
                <el-card style="width: 360px; margin-top: 10px; margin-left: 6px; border-radius: 10px" v-for="(item, index) in noticeList" :key="index" class="box-card">
                    <div slot="header" class="clearfix">
                        <span>{{ item.createTime }}</span>
                        <el-button style="float: right; padding: 3px 0" type="text">{{ item.noticeType }}</el-button>
                    </div>
                    <div>
                        {{ item.noticeContent }}
                    </div>
                </el-card>
            </div>

            <div v-show="isShowNotice = true">
                <van-empty description="您还没有收到任何短信通知!" />
            </div>

        </van-pull-refresh>

        <van-cell title="显示分享面板" @click="showShare = true" />
        <van-share-sheet
                v-model="showShare"
                title="立即分享给好友"
                :options="options"
                @select="onSelect"
        />

    </div>
</template>

<script>
    import Toast from "vant/lib/toast";

    import progress from '../assets/贷款进度.png'
    import total from '../assets/总数.png'
    import reback from '../assets/校验码.png'
    import guide from '../assets/指南.png'
    import reguide from '../assets/还款指南.png'
    import axios from "axios";
    import Notify from "vant/lib/notify";

    export default {
        name: "Main",
        data() {
            return{
                user: {},
                showShare: false,
                options: [
                    { name: '微信', icon: 'wechat' },
                    { name: '微博', icon: 'weibo' },
                    { name: '复制链接', icon: 'link' },
                    { name: '二维码', icon: 'qrcode' },
                ],
                isShowNotice: false,
                noticeList: [],
                searchValue: '',
                isLoading: false,
                active: 2,
                images: [
                    require('../assets/学习卡.jpg'),
                    require('../assets/忠人之事.jpg'),
                ],
                textArray: [
                    { 'icon': progress, 'name': '贷款进度' },
                    { 'icon': total, 'name': '还款累计' },
                    { 'icon': reback, 'name': '返校校验码' },
                    { 'icon': guide, 'name': '贷款指南' },
                    { 'icon': reguide, 'name': '还款指南' },
                ]
            }
        },
        created() {
            this.getNotice()
        },
        methods: {
            onSelect(option) {
                Notify({ type: 'success', message: option.name + '分享' });
                this.showShare = false
            },
            getNotice() {
                if (sessionStorage.getItem('token') === null) {
                    Notify({ type: 'danger', message: '请先登录' });
                }
                axios.get('http://124.70.180.155:8080/system/user/profile',
                    {
                        headers: { Authorization: sessionStorage.getItem('token')}
                    }).then(res => {
                        this.user = res.data.data
                        axios.get('http://124.70.180.155:8080/system/notice/selectNoticeListByUserId/' + this.user.userId,
                            {
                                headers: { Authorization: sessionStorage.getItem('token')}
                            }).then(res => {
                                console.log(res.data.rows)
                                this.noticeList = res.data.rows
                                if (res.data.rows === undefined) {
                                    this.isShowNotice = true
                                }
                             })
                    })
            },
            toSelect(index) {
                if (index === 0) {
                    this.$router.push('/progress')
                }
                if (index === 1) {
                    this.$router.push('/count')
                }
                if (index === 2) {
                    this.$router.push('/reback')
                }
                if (index === 3) {
                    this.$router.push('/guide')
                }
                if (index === 4) {
                    this.$router.push('/reguide')
                }
            },
            onRefresh() {
                setTimeout(() => {
                    Toast('刷新成功')
                    if (sessionStorage.getItem('token') === null) {
                        Notify({ type: 'danger', message: '请先登录' });
                    }
                    this.isLoading = false;
                    this.count++;
                }, 1000);
            },
        },
    }
</script>
